<template>
	<div class="upload-container">
		<el-upload class="image-uploader"
							ref="uploadref"
							accept="image/*"
							:data="extra" :headers='setheader'
							drag :multiple="false" 
							:action="actionUrl"
		  				:on-success="handleImageScucess"  
							:auto-upload="false" 
							:on-change="changeFile"
							:on-error="handleError"
							:before-upload="beforeUpload"
							>
			<i class="el-icon-upload"></i>
			<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
		</el-upload>
		<div class="image-preview">
			<div class="image-preview-wrapper" v-show="tmpFile !='' || tempUrl!=''">
				<img v-if="tmpFile !==''" :src="tmpFile">
				<img v-else :src="tempUrl">
				<div class="image-preview-action">
					<i @click="rmImage" class="el-icon-delete"></i>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'singleImageUpload',
  props: {
    value: Object,
    imgType: String,
    actionUrl: String,
    tmpFile: String
  },

  computed: {
    // 从 vuex 去除数据
    ...mapGetters(['login_token', 'login_mobile'])
  },

  created() {
    this.setheader = { token: this.login_token, mobile: this.login_mobile }
    if (this.value.thumb !== '') {
      this.tempUrl = this.value.thumb
    } else {
      this.tempUrl = ''
    }
  },

  data() {
    return {
      tempUrl: '',
      extra: { type: this.imgType, keyword: this.value.name },
      setheader: {}
    }
  },

  methods: {
    // 文件类型进行判断
    beforeUpload(file) {
      this.header = { token: this.login_token, mobile: this.login_mobile }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isLt2M
    },

    // 当选择选择文件时触发的方法
    changeFile(file) {
      this.$emit('view-img', file)
    },

    // 提交数据触发
    handleSubmit() {
      this.extra.keyword = (this.value.name) ? this.value.name : '站点头像'
      this.$refs.uploadref.submit()
    },

    // 删除确认操作
    rmImage() {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.emitInput('')
        this.tempUrl = ''
      })
    },

    // 错误信息
    handleError() {
      this.$message.error('图片上传失败')
    },

    // 成功 /失败返回
    emitInput(val) {
      this.$emit('input-img', val)
    },

    // 成返回数据(立即上传使用)
    handleImageScucess(file) {
      if (file.code === 0) {
        this.emitInput(file.data)
        this.value.thumb = file.data
      } else {
        this.$root.message(file.msg, 'error')
      }
    }
  },
  // 监事事件
  watch: {
    value(newi, oldv) {
      this.$nextTick(() => {
        this.tempUrl = newi.thumb
      })
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.upload-container {
	width: 100%;
	position: relative;
	@include clearfix;
	.image-uploader {
		width: 35%;
		float: left;
	}
	.image-preview {
		width: 200px;
		height: 200px;
		position: relative;
		border: 1px dashed #d9d9d9;
		float: left;
		margin-left: 50px;
		.image-preview-wrapper {
			position: relative;
			width: 100%;
			height: 100%;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.image-preview-action {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			cursor: default;
			text-align: center;
			color: #fff;
			opacity: 0;
			font-size: 20px;
			background-color: rgba(0, 0, 0, .5);
			transition: opacity .3s;
			cursor: pointer;
			text-align: center;
			line-height: 200px;
			.el-icon-delete {
				font-size: 36px;
			}
		}
		&:hover {
			.image-preview-action {
				opacity: 1;
			}
		}
	}
	.image-app-preview {
		width: 320px;
		height: 180px;
		position: relative;
		border: 1px dashed #d9d9d9;
		float: left;
		margin-left: 50px;
		.app-fake-conver {
			height: 44px;
			position: absolute;
			width: 100%; // background: rgba(0, 0, 0, .1);
			text-align: center;
			line-height: 64px;
			color: #fff;
		}
	}
}
</style>
